<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="郭郑磊">
    <title>小米商城-产品分类</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/product.css">
    <style>
        
    </style>
</head>

<body>
    <!--头部工具条-->
    <div class="header-wrapper">
        <span class="glyphicon glyphicon-menu-left"></span>
        <span class="header-title">商品分类</span>
        <span class="glyphicon glyphicon-search"></span>
    </div>
    <!--滚动导航条-->
   <nav>
       <ul class="scroll-menu">
           <li class="toolbar-active"><a href="">手机.电话卡</a></li>
           <li class=""><a href="">笔记本.平板</a></li>
           <li class=""><a href="">电视.盒子</a></li>
           <li class=""><a href="">智能硬件.路由器</a></li>
           <li class=""><a href="">移动电源.插线板.电池</a></li>
           <li class=""><a href="">耳机.音响.存储</a></li>
           <li class=""><a href="">小米生活方式</a></li>
           <li class=""><a href="">保护类配件</a></li>
           <li class=""><a href="">优惠套餐</a></li>
       </ul>
   </nav>
   
    <!--3.主题内容-->
    <main>
        <!--app广告-->
		<!--<div class="app">
			<img src="images/app.png" alt=" " />
			<span class="close-app"></span>
		</div>-->

        <section class="lg-img">
            <section class="gray-wrap"></section>
            <section class="mid-img">
                <img src="images/tel5.jpg" alt="">
            </section>
        </section>
        <section class="gray-wrap"></section>
        <section class="flex">
            <section class="half-img">
               <figure>
                    <img src="images/straPro-02.jpg" alt="">
                    <figcaption>红米Note</figcaption>
                    <figcaption>￥999</figcaption>
                </figure>
                <figure>
                    <img src="images/straPro-04.jpg" alt="">
                    <figcaption>红米Note</figcaption>
                    <figcaption>￥999</figcaption>
                </figure>
                <figure>
                    <img src="images/starPro-03.jpg" alt="">
                    <figcaption>红米Note</figcaption>
                    <figcaption>￥999</figcaption>
                </figure>
            </section>
            <section class="half-img">
                <figure>
                    <img src="images/straPro-05.jpg" alt="">
                    <figcaption>红米Note</figcaption>
                    <figcaption>￥999</figcaption>
                </figure>
                <figure>
                    <img src="images/straPro-06.jpg" alt="">
                    <figcaption>红米Note</figcaption>
                    <figcaption>￥999</figcaption>
                </figure>
                <figure>
                    <img src="images/straPro-07.jpg" alt="">
                    <figcaption>红米Note</figcaption>
                    <figcaption>￥999</figcaption>
                </figure>
            </section>
        </section>        
        
        <section class="left-img"></section>
        <section class="right-img"></section>
        <section class="bot-img"></section>
        
        <section class=""></section>
        <section class=""></section>
        <section class=""></section>
    </main>
    
    <!--3.主题内容结束-->
  
    <!--底部导航条-->
    <footer class="navbar-fixed-bottom row">
        <div class="container">
            <div class="col-xs-3">
                <a href="index.html">
                    <span class="glyphicon glyphicon-home"></span>
                    <p class="spa">首页</p>
                </a>
            </div>
            <div class="col-xs-3 toolbar-active">
                <a href="product.html">
                    <span class="glyphicon glyphicon-list-alt"></span>
                    <p class="spa">分类</p
                </a>
            </div>
            <div class="col-xs-3">
                <a href="carl.html">
                    <span class="glyphicon glyphicon-shopping-cart"></span>
                    <p class="spa">购物车</p>
                </a>
            </div>
            <div class="col-xs-3">
                <a href="user.html">
                    <span class="glyphicon glyphicon-user "></span>
                    <p class="spa">我的</p>
                </a>
            </div>
        </div>
    </footer>
    <!--底部导航条结束-->
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>